<template>
	<view class="demand-page">
		<common-list :isDataEmpty="tableData.length === 0" :status="status" emptyTop="200rpx">
			<template #list>
				<view>
					<view class="list">
						<view class="item" v-for="(item, index) in tableData" :key="index"
							@click="handDetail(item, index)">
							<view class="nav">
								<view class="name">{{ item.title }}</view>
								<view class="price">
									{{ item.lowestPrice }}-{{ item.tallPrice }}
								</view>
							</view>
							<view class="tags">
								<view class="tag" v-for="el in item.platform" :key="el">
									{{ el }}
								</view>
							</view>
							<view class="desc">
								{{ item.otherRequire }}
							</view>
							<view class="btns">
								<view class="tag">{{ item.type === 'OPERATE' ? '营运' : '非营运' }}</view>
								<button class="cu-btn" @click.stop="handQiang(index)">立即抢单</button>
							</view>
						</view>
					</view>
				</view>
			</template>
		</common-list>
		<uv-modal ref="modal" show-cancel-button confirm-color="#FF9113" @confirm="handConfirm" width="550rpx">
			<view style="line-height: 100rpx;">{{ tip }}</view>
		</uv-modal>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		doDtList,
		doQiang
	} from '@/apis/demand.js'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		userList
	} from '@/hooks/userList.js'
	import CommonList from '@/components/commonList/list.vue'

	let type = 'qiang'
	let oldIndex = 0
	const modal = ref()
	const tip = ref('')
	const handQiang = (index) => {
		type = 'qiang'
		oldIndex = index
		tip.value = '确认要抢单吗?'
		modal.value.open()
	}
	const handConfirm = async () => {
		if (type === 'qiang') {
			await doQiang(tableData.value[oldIndex].id)
			uni.$uv.toast('抢单成功')
			tableData.value.splice(oldIndex, 1)
			uni.redirectTo({
				url: '/pagesA/order/demand'
			})
		}
	}

	const handDetail = (e, index) => {
		uni.navigateTo({
			url: `/pagesA/demand/shopDetail?id=${e.id}`,
			events: {
				qiangEvent: () => {
					tableData.value.splice(index, 1)
					console.log(tableData.value)
				}
			}
		})
	}

	const getRow = (el) => {
		el.platform = el.platform.split(',')
		return el
	}

	const getApi = async (params) => {
		const res = await doDtList(params)
		res.records = res.records.map(el => {
			return getRow(el)
		})
		return res
	}
	const {
		tableData,
		status,
		fetchData,
		onBottom,
		onRefresh,
		queryForm
	} = userList({
		apis: {
			getApi
		},
		initForm: {}
	})
	onPullDownRefresh(() => {
		onRefresh()
	})
	onReachBottom(() => {
		onBottom()
	})
	onLoad(() => {
		onRefresh()
	})
</script>

<style lang="scss" scoped>
	.demand-page {
		min-height: 100vh;
		background-color: #F5F5F5;

		.tabs {
			position: sticky;
			top: 0;
			z-index: 3;
			background-color: #fff;
		}

		.list {
			padding: 20rpx 24rpx;

			.item {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 24rpx;
				box-sizing: border-box;
				position: relative;

				&:not(:first-child) {
					margin-top: 40rpx;
				}

				.nav {
					display: flex;
					align-items: center;

					.name {
						flex: 1 0 0;
						width: 0;
						margin-right: 24rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					.price {
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FF4E00;
					}
				}



				.tags {
					display: flex;
					flex-wrap: wrap;
					margin-top: 18rpx;
					gap: 12rpx;

					.tag {
						padding: 4rpx 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						background: #F5F5F5;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}
				}

				.desc {
					margin-top: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.btns {
					margin-top: 42rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tag {
						margin-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #C16F0B;
						padding: 10rpx;
						background: linear-gradient(180deg, #FFF7E4 0%, #FFE49E 100%);
						border-radius: 10rpx 0rpx 10rpx 0rpx;
					}

					.cu-btn {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333;
						background: #FFC434;
						border-radius: 16rpx;
					}
				}
			}
		}
	}
</style>